<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-04 11:31:02
-->
<template>
  <div class="home">
    <van-nav-bar title="首页" />
    <van-search
      placeholder="请输入搜索关键词"
      input-align="center"
      style="padding-top: 0"
    />
    <!-- 标签页区域 -->
    <van-tabs v-model="active" @click="tabClickerHandle">
      <van-tab title="全部"></van-tab>
      <van-tab title="安装"></van-tab>
      <van-tab title="维修"></van-tab>
      <van-tab title="拆机"></van-tab>
    </van-tabs>
    <van-list>
      <van-cell
        v-for="(item, index) in orderList"
        :key="index"
        @click="
          $router.push({
            path: '/manager/orderDetail',
            query: { id: item.engineer_id },
          })
        "
      >
        <span style="float: left; margin-top: 31px">
          <i
            class="iconfont icon-gongdan"
            style="font-size: 65px; margin-right: 10px"
          ></i>
        </span>
        <div style="display: inline-block; line-height: 30px; font-size: 16px">
          <div>
            <b>工单状态：</b><span style="color: red">{{ item.status }}</span>
          </div>
          <div>
            <b>工单类型：</b
            ><span
              ><el-tag
                :type="
                  item.type === '安装'
                    ? 'success'
                    : item.type === '维修'
                    ? 'warning'
                    : 'danger'
                "
                >{{ item.type }}</el-tag
              ></span
            >
          </div>
          <div>
            <b>申报时间：</b><span>{{ item.create_time | datefmt }}</span>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>
<script>
// 请求方法的导入
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      active: 0,
      params: {
        page: 1,
        pageSize: 100,
        status: "待接单",
      },
      orderList: [],
    };
  },
  methods: {
    getAllWorkerOrdersByType() {
      switch (this.active) {
        case 0:
          break;
        case 1:
          this.params.type = "安装";
          break;
        case 2:
          this.params.type = "维修";
          break;
        case 3:
          this.params.type = "拆机";
          break;
      }
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },
    //标签页点击事件
    tabClickerHandle(name, title) {
      if (title === "全部") {
        this.params.type = "";
      }
      if (title === "安装") {
        this.params.type = "安装";
      }
      if (title === "维修") {
        this.params.type = "维修";
      }
      if (title === "拆机") {
        this.params.type = "拆机";
      }
      get("/workorder/pageQuery", this.params).then((res) => {
        this.orderList = res.data.list;
      });
    },
  },
  created() {
    this.getAllWorkerOrdersByType();
  }, //利用生命周期钩子执行XXX方法，方法中利用组件库active中得到对应的每个title的数字号，从而进入循环，根据地址所对应的参数来返回所需的值
};
</script>
<style scoped>
@import "//at.alicdn.com/t/font_3113095_4hkm9igyy4i.css";
</style>
